/**
 * @description 监督举报 模块 table 通用组件二次封装
 * @pargram 
    tableData : table数据 (数组) []

    tableLabel ： 表头展示数据 (数组): [{
        prop : 'name',  // 对应表格的字段
        label : '姓名', // 显示的标题
        width : '120px',  // 行宽度
        fixed : false // 列是否固定在左侧或者右侧，true 表示固定在左侧 (true, left, right) 默认false
        minWidth: ''
        option: [] // 多级表头配置参数(数据类似tableLabel)
        render: object 自定义行内容render函数
        type (string) :  // 对应列的类型  (selection/index/expand)
        align : 对齐方式 (默认center)
        showDeletePopover(boolean):展示删除弹出框

        headerRender: object 自定义表头 暂未配置
        sortable(boolean): 排序 暂未配置
    }]

    tableOption: {
        stripe(boolean) : // 属性可以创建带斑马纹的表格 (默认false)
        highlightCurrentRow (boolean)： // 当前选中行单选高亮 (默认false)
        border(boolean) : // 表格边框 (默认false)
        height(string/number) : 表格高度
        maxHeight：(string/number) : 表格最大高度
        resizable: 对应列是否可以通过拖动改变宽度
        headerCellStyle: 表头单元格的 style 的回调方法
        cellStyle: 单元格的 style 的回调方法
        
        option:[]
        row-class-name: 暂未配置
    }

 * @return
 *      @select 当用户手动勾选数据行的 Checkbox 时触发的事件 返回selection 当前选中的行项目数组 row 当前操作的行项目
 *      @selection-change 返回当前选中的行项目selection 
 *      @selection-all 返回当前选中的行项目selection 
 * @auth yxj
 */
 <template>
    <div class="tableComponent">
        <el-table
            v-loading="tableOption.loading"
            style="width: 100%"
            :data = "tableData"
            :stripe = "tableOption.stripe"
            :highlight-current-row = "tableOption.highlightCurrentRow"
            :border = "tableOption.border"
            :height = "tableOption.height || ''"
            :header-cell-style = "tableOption.headerCellStyle || {}"
            :cell-style = "tableOption.cellStyle || {}"
            
            @select = "handleSelect"
            @selection-change = "handleSelectionChange"
            @select-all = "handleSelectionAll"
        >
            <template v-for = "(column, index) in tableLabel">
                <el-table-column
                    :key = 'index'
                    v-if = "column.type"
                    :label = "column.label"
                    :type = "column.type ? column.type : ''"
                    :width = "column.width ? column.width : ''"
                    :fixed = "column.fixed ? column.fixed : false"
                    :min-width = "column.minWidth ? column.minWidth : ''"
                    :align = "column.align"
                    :resizable = "tableOption.resizable || ''"
                    ></el-table-column>
                <el-table-column
                    v-if = "!column.type"
                    :key = 'index'
                    :label = "column.label"
                    :prop = "column.prop"
                    :width = "column.width ? column.width : ''"
                    :fixed = "column.fixed ? column.fixed : false"
                    :min-width = "column.minWidth ? column.minWidth : ''"
                    :align = "column.align"
                    :resizable = "tableOption.resizable || ''"
                >
                    <template v-if = "column.type" slot-scope = "scope">
                        <span>{{column.type}}</span>
                    </template>
                    <template v-if = "!column.type" slot-scope = "scope">
                        <ex-slot v-if = "column.render" :render = "column.render" :row = "scope.row" :index="scope.$index"/>
                        <span v-if = "!column.render && (!column.option || column.option.length === 0)" v-text = "scope.row[column.prop]"></span>
                        <template v-if = "column.showDeletePopover">
                            <el-popover
                                placement="top"
                                width="160"
                                v-model="scope.row.showDeletePopover">
                                <p>确定删除此信息吗？</p>
                                <div style="text-align: right; margin: 0">
                                    <el-button size="mini" @click="scope.row.showDeletePopover = false">取消</el-button>
                                    <el-button type="primary" size="mini" @click="scope.row.showDeletePopover = false; $emit('delete', scope.row)">确定</el-button>
                                </div>
                                <el-button slot="reference" style="margin-left: 12px;" size = "mini" type = "danger">删除</el-button>
                            </el-popover>
                        </template>
                    </template>
                    <taleColumn v-if = "!column.type && column.option && column.option.length !== 0" :tableLabel = "column.option"></taleColumn>
                </el-table-column>
            </template>
        </el-table>
    </div>
  
</template>
<script>
// 自定义内容的组件
let exSlot = {
    functional: true,
    props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
        type: Object,
        default: null
    }
    },
    render: (h, data) => {
        const params = {
            row: data.props.row,
            index: data.props.index
        }
        if (data.props.column) params.column = data.props.column
        return data.props.render(h, params)
    }
}
let _that;
export default {
  components : {
      taleColumn : () => import('./tableColumn'),
      Urging : () => import('@/components/Popup/Urging.vue'),
      popoverTable : () => import('@/components/Popup/popoverTable.vue'),
      exSlot
  },
  props : {
    tableData: {
        type: Array,
        default : () => {
            return []
        }
    },
    tableLabel: {
        type: Array,
        default : () => {
            return []
        }
    },
    tableOption : {
        type : Object,
        default : () => {
            return {

            }
        }
    },
  },
  data () {
    return {
        visible: false
    }
  },
  mounted() {
    _that = this
  },
  methods : {
    // 当用户手动勾选数据行的 Checkbox 时触发的事件
    handleSelect : (selection, row) => {
        _that.$emit('select', selection, row)
    },
    //   选中行项目发生变化触发事件
    handleSelectionChange : (selection) => {
        _that.$emit('selection-change', selection)
    },
    // 当用户手动勾选全选 Checkbox 时触发的事件
    handleSelectionAll : (selection) => {
        _that.$emit('selection-all', selection)
    }
  },
}
</script>
<style scoped>

</style>
 